<!--
  @author: cqz
  @desc: 字典树选择通用组件
  @date: 2021-7-10
-->
<template>
  <el-popover
    ref="dictListPopover"
    placement="bottom-start"
    :trigger="disabled ? 'manual' : 'click'">
    <el-row type="flex" style="height: 40px; margin-bottom: 5px; line-height: 40px;">
      <el-input v-model="filterText"
                prefix-icon="el-icon-search"
                placeholder="过滤"
                clearable
                maxlength="30"></el-input>
    </el-row>
    <el-tree
      :data="dictList"  style="height: 400px; overflow-y: auto"
      :props="dictListTreeProps" :filter-node-method="filterNode"
      node-key="id"
      :default-expanded-keys="expandedList"
      ref="tree"
      @current-change="query"
      :highlight-current="true">
    </el-tree>
  </el-popover>
</template>

<script>
  import { treeDataTranslate } from '@/utils'

  export default {
    name: 'dictSelector',
    model: {
      prop: 'dictName', // 指向props的参数名
      event: 'change'   // 事件名称
    },
    props: {
      id: '',
      dictName: '',
      disabled: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      dictName (val) {
        this.$emit('change', val)
      },
      filterText (val) {
        this.$refs.tree.filter(val)
      }
    },
    data () {
      return {
        filterText: '',
        loading: false,
        expandedList: [],
        dictList: [],
        dictListTreeProps: {
          label: 'dictName',
          children: 'children'
        }
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init (id) {
        this.loading = true
        if (id) {
          this.id = id
        }
        this.getDictLst()
      },
      /****
       * 重新刷新显示的输入框内容
       */
      reInit () {
        if (this.dictList.length > 0) {
          this.$nextTick(() => {
            var node = this.$refs.tree.getNode(this.id)
            if (node) {
              this.dictName = node.data.dictName
              this.$emit('input', this.dictName)
              this.filterText = this.dictName
            }
          })
        }
      },
      getDictLst () {
        this.$http({
          // 字典数据
          url: this.$http.adornUrl(`/std/dict/type/list`),
          method: 'get',
          params: this.$http.adornParams({
            'pid': '0'
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dictList = treeDataTranslate(data.list, 'id', 'pid')
            if (this.id) {
              this.$nextTick(() => {
                var node = this.$refs.tree.getNode(this.id)
                if (node) {
                  // this.query(node.data, node)
                  this.dictName = node.data.dictName
                  this.$emit('input', this.dictName)
                  this.filterText = node.data.dictName
                }
              })
            }
          } else {
            this.dictList = []
          }
          this.loading = false
        })
      },
      /***
       * 树节点过滤
       */
      filterNode (value, data) {
        if (!value) return true
        return data.dictName.indexOf(value) !== -1 || (data.dictCode || '').indexOf(value.toUpperCase()) > -1
      },
      clearHandle () {
        this.dictName = ''
        this.$emit('node-click')
      },
      query (data, node) {
        if (data.isDict === '1') {
          this.dictName = data.dictName
          this.$emit('node-click', data)
        }
      }
    }
  }
</script>
